﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>开源媒介 version 3.1</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
</head>
<body>
<header>
    <img class="logo" src="https://i.imgs.ovh/2025/09/24/7gMrlh.png" alt="logo">
    <nav>
        <ul>
            <li><a href="#banner" data-anchor="banner" class="active invalid">头版</a></li>
            <li><a href="#friend-links" data-anchor="friend-links" class="invalid">友链</a></li>
            <li><a href="#exhibit-box" data-anchor="exhibit-box" class="invalid">展柜</a></li>
            <li><a href="#temp-box-1" data-anchor="temp-box-1" class="invalid">推荐项目</a></li>
            <li><a href="#temp-box-2" data-anchor="temp-box-2" class="invalid">热门话题</a></li>
            <li><a href="#temp-box-3" data-anchor="temp-box-3" class="invalid">冰桶挑战</a></li>
            <li><a href="#about" data-anchor="about" class="invalid">关于与鸣谢</a></li>
        </ul>
        <div class="active-underline"></div>
    </nav>
    <div class="search">
        <label>
            <input id="search" type="text" placeholder="搜索开源媒介">
        </label>
        <button class="btn">
            <i class="fa-solid fa-magnifying-glass"></i>
        </button>
    </div>
    <a class="user invalid" href="#">
        <img class="avatar" src="https://i.imgs.ovh/2025/09/24/7gMaGx.jpeg" alt="avatar">
        <p class="uname">用户名</p>
    </a>
</header>
<div class="header-placeholder"></div>
<div id="banner" class="anchor-target">
    <div class="type-area">
        <nav>
            <ul>
                <li><a href="#" class="invalid">前端开发</a><i class="fa-solid fa-pen-nib"></i></li>
                <li><a href="#" class="invalid">后端开发</a><i class="fa-solid fa-code"></i></li>
                <li><a href="#" class="invalid">移动开发</a><i class="fa-solid fa-mobile"></i></li>
                <li><a href="#" class="invalid">桌面开发</a><i class="fa-solid fa-desktop"></i></li>
                <li><a href="#" class="invalid">游戏开发</a><i class="fa-solid fa-gamepad"></i></li>
                <li><a href="#" class="invalid">国际舆论</a><i class="fa-solid fa-comments"></i></li>
                <li><a href="#" class="invalid">游戏赛事</a><i class="fa-solid fa-trophy"></i></li>
                <li><a href="#" class="invalid">旧日残影</a><i class="fa-solid fa-hourglass-half"></i></li>
            </ul>
        </nav>
        <div class="bg-info">
            <h3 class="bg-author">Kieed:</h3>
            <h2 class="bg-title"><i>StarCalendar</i></h2>
        </div>
    </div>
</div>
<div id="friend-links" class="type-area anchor-target">
    <h4 class="title"><i class="fa-solid fa-heart"></i>站长推荐<i class="fa-solid fa-heart"></i></h4>
    <ul>
        <li>
            <i class="devicon-javascript-plain"></i>
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">JavaScript</a>
        </li>
        <li>
            <i class="devicon-mysql-original"></i>
            <a href="https://www.mysql.com/">MySQL</a>
        </li>
        <li>
            <i class="devicon-linux-plain"></i>
            <a href="https://www.kernel.org/">Linux</a>
        </li>
        <li>
            <i class="devicon-github-original"></i>
            <a href="https://github.com">GitHub</a>
        </li>
        <li><a href="https://key.visualarts.gr.jp/">Key 公式サイト</a></li>
        <li><a href="https://game.bilibili.com/HBR/">Heaven Burns Red</a></li>
    </ul>
    <div class="refresh invalid">
        <a href="#" class="invalid">
            <div><i class="fas fa-rotate"></i> 过于神秘了，整点正常的 (刷新)</div>
        </a>
    </div>
</div>
<div id="exhibit-box" class="ror-box type-area anchor-target">
    <div class="box-head">
        <h2 class="title">设计展柜</h2>
        <a href="#" class="see-more invalid"><i class="fa-solid fa-ellipsis"></i> 查看全部</a>
    </div>
    <div class="box-body">
        <ul class="exhibit-list">
            <li>
                <div class="item">
                    <div class="item-placeholder">
                        <i class="fa-solid fa-hourglass-half"></i>
                        <p class="loading-text">我们正在为您准备图片，<br>请稍事等待，坐和放宽。</p>
                    </div>
                    <div class="image">
                        <img src="" alt="exh-1">
                    </div>
                    <div class="info">
                        <h4 class="title">作品标题</h4>
                        <div class="desc">
                            <span class="category">作品类别</span>
                            <span class="file-type">文件类型</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="item-placeholder">
                        <i class="fa-solid fa-hourglass-half"></i>
                        <p class="loading-text">海内存知己，<br>天涯若比邻。</p>
                    </div>
                    <div class="image">
                        <img src="" alt="exh-1">
                    </div>
                    <div class="info">
                        <h4 class="title">作品标题</h4>
                        <div class="desc">
                            <span class="category">作品类别</span>
                            <span class="file-type">文件类型</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="item-placeholder">
                        <i class="fa-solid fa-hourglass-half"></i>
                        <p class="loading-text">我们正在为您准备图片，<br>请稍事等待，坐和放宽。</p>
                    </div>
                    <div class="image">
                        <img src="" alt="exh-1">
                    </div>
                    <div class="info">
                        <h4 class="title">作品标题</h4>
                        <div class="desc">
                            <span class="category">作品类别</span>
                            <span class="file-type">文件类型</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="item-placeholder">
                        <i class="fa-solid fa-hourglass-half"></i>
                        <p class="loading-text">我们正在为您准备图片，<br>请稍事等待，坐和放宽。</p>
                    </div>
                    <div class="image">
                        <img src="" alt="exh-1">
                    </div>
                    <div class="info">
                        <h4 class="title">作品标题</h4>
                        <div class="desc">
                            <span class="category">作品类别</span>
                            <span class="file-type">文件类型</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="item-placeholder">
                        <i class="fa-solid fa-hourglass-half"></i>
                        <p class="loading-text">我们正在为您准备图片，<br>请稍事等待，坐和放宽。</p>
                    </div>
                    <div class="image">
                        <img src="" alt="exh-1">
                    </div>
                    <div class="info">
                        <h4 class="title">作品标题</h4>
                        <div class="desc">
                            <span class="category">作品类别</span>
                            <span class="file-type">文件类型</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="item-placeholder">
                        <i class="fa-solid fa-hourglass-half"></i>
                        <p class="loading-text">白日依山尽，<br>黄河入海流。</p>
                    </div>
                    <div class="image">
                        <img src="" alt="exh-1">
                    </div>
                    <div class="info">
                        <h4 class="title">作品标题</h4>
                        <div class="desc">
                            <span class="category">作品类别</span>
                            <span class="file-type">文件类型</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="item-placeholder">
                        <i class="fa-solid fa-hourglass-half"></i>
                        <p class="loading-text">我们正在为您准备图片，<br>请稍事等待，坐和放宽。</p>
                    </div>
                    <div class="image">
                        <img src="" alt="exh-1">
                    </div>
                    <div class="info">
                        <h4 class="title">作品标题</h4>
                        <div class="desc">
                            <span class="category">作品类别</span>
                            <span class="file-type">文件类型</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="item-placeholder">
                        <i class="fa-solid fa-hourglass-half"></i>
                        <p class="loading-text">沉舟侧畔千帆过，<br>病树前头万木春。</p>
                    </div>
                    <div class="image">
                        <img src="" alt="exh-1">
                    </div>
                    <div class="info">
                        <h4 class="title">作品标题</h4>
                        <div class="desc">
                            <span class="category">作品类别</span>
                            <span class="file-type">文件类型</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="item-placeholder">
                        <i class="fa-solid fa-hourglass-half"></i>
                        <p class="loading-text">我们正在为您准备图片，<br>请稍事等待，坐和放宽。</p>
                    </div>
                    <div class="image">
                        <img src="" alt="exh-1">
                    </div>
                    <div class="info">
                        <h4 class="title">作品标题</h4>
                        <div class="desc">
                            <span class="category">作品类别</span>
                            <span class="file-type">文件类型</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="item-placeholder">
                        <i class="fa-solid fa-hourglass-half"></i>
                        <p class="loading-text">子曰：有朋自远方来，<br>不亦乐乎？</p>
                    </div>
                    <div class="image">
                        <img src="" alt="exh-1">
                    </div>
                    <div class="info">
                        <h4 class="title">作品标题</h4>
                        <div class="desc">
                            <span class="category">作品类别</span>
                            <span class="file-type">文件类型</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<div id="temp-box-1" class="ror-box type-area anchor-target">
    <div class="box-head">
        <h2 class="title">推荐项目</h2>
        <a href="#" class="see-more invalid"><i class="fa-solid fa-ellipsis"></i> 查看全部</a>
    </div>
    <div class="box-body">
        <div class="box-placeholder">
            <i class="fa-solid fa-road-barrier"></i>
            <h3 class="title">施工中</h3>
        </div>
    </div>
</div>
<div id="temp-box-2" class="ror-box type-area anchor-target">
    <div class="box-head">
        <h2 class="title">热门话题</h2>
        <a href="#" class="see-more invalid"><i class="fa-solid fa-ellipsis"></i> 查看全部</a>
    </div>
    <div class="box-body">
        <div class="box-placeholder">
            <i class="fa-solid fa-road-barrier"></i>
            <h3 class="title">施工中</h3>
        </div>
    </div>
</div>
<div id="temp-box-3" class="ror-box type-area anchor-target">
    <div class="box-head">
        <h2 class="title">冰桶挑战</h2>
        <a href="#" class="see-more invalid"><i class="fa-solid fa-ellipsis"></i> 查看全部</a>
    </div>
    <div class="box-body">
        <div class="box-placeholder">
            <i class="fa-solid fa-road-barrier"></i>
            <h3 class="title">施工中</h3>
        </div>
    </div>
</div>
<div class="blank-river"></div>
<footer id="about" class="anchor-target">
    <div class="copyright">
        <img src="https://i.imgs.ovh/2025/09/24/7gMrlh.png" alt="head" class="logo">
        <p><i class="fa-regular fa-copyright"></i>2025 SysTerror Web Learning Works. 保留所有权利。</p>
        <p>网页中使用的部分图片等资源仅用于个人学习，而不是用于商业用途。</p>
        <p>特别地，本页面的 logo 由在线生成工具
            <a href="https://lab.nulla.top/ba-logo"><i class="fa-solid fa-up-right-from-square"></i>nulla.top</a>
            生成。</p>
        <br>
        <p>感谢黑马程序员
            <span class="emphasized"><i class="fa-solid fa-at"></i>Pink老师</span>
            的教学和我的朋友
            <span class="emphasized"><i class="fa-solid fa-at"></i>微途-witw</span>
            的监督。</p>
    </div>
    <div class="links">
        <dl>
            <dt><i class="fa-solid fa-globe"></i>传送门</dt>
            <dd>
                <i class="fa-brands fa-bilibili"></i>
                <a href="https://www.bilibili.com/video/BV14J4114768">Pink老师的前端课程</a>
            </dd>
            <dd>
                <i class="fa-brands fa-github"></i>
                <a href="https://github.com/SysTerror">我@SysTerror</a>
            </dd>
            <dd>
                <i class="fa-brands fa-qq"></i>
                <a href="https://pd.qq.com/s/65hjqm3ke">我的QQ频道</a>
            </dd>
            <dd>
                <i class="fa-brands fa-bilibili"></i>
                <a href="https://space.bilibili.com/66954181">我@系错_SysTerror</a>
            </dd>
            <dd>
                <i class="fa-brands fa-bilibili"></i>
                <a href="https://space.bilibili.com/374810322">我的朋友@微途-witw</a>
            </dd>
        </dl>
        <dl>
            <dt><i class="fa-solid fa-circle-info"></i>关于开源媒介</dt>
            <dd><i class="fa-solid fa-code"></i><a href="#" class="invalid">开发人员</a></dd>
            <dd><i class="fa-brands fa-blogger-b"></i><a href="#" class="invalid">更新日志</a></dd>
            <dd><i class="fa-solid fa-face-smile-wink"></i><a href="#" class="invalid">获取帮助</a></dd>
            <dd><i class="fa-solid fa-envelope"></i><a href="mailto:sys.terror@outlook.com">邮件联系</a></dd>
            <dd><i class="fa-solid fa-comment-dots"></i><a href="#" class="invalid">建议和反馈</a></dd>
        </dl>
    </div>
</footer>
<script src="script.js"></script>
</body>
</html>